<template>
  <div class="goods-base-detail" v-if="isShow">
    <div class="base-detail-title">{{detailbasedate.desc}}</div>
    <div class="base-info-price">
      <span class="new-price">{{detailbasedate.price}}</span>
      <span class="old-price">{{detailbasedate.oldPrice}}</span>
      <span class="discount" v-if="detailbasedate.discount">{{detailbasedate.discount}}</span>
    </div>
    <div class="base-info-other">
      <span v-for="(item, index) in detailbasedate.columns" :key="index">{{item}}</span>
    </div>

    <div class="base-info-service">
      <ul>
        <li
          class="service-item"
          v-for="(item, index) in detailbasedate.services"
          :key="index"
          v-show="aa(index)"
        >
          <img :src="item.icon">
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsBaseDetail",
  props: {
    detailbasedate: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      flag: true
    };
  },
  methods: {
    aa(index) {
      let flag = true;
      if (index == 0 || index == 4) flag = false;
      return flag;
    }
  },
  components: {},
  computed: {
    isShow() {
      return Object.keys(this.detailbasedate).length != 0;
    },
    name() {
      return this.detailbasedate.services.slice().pop().name;
    }
  },
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log(this.detailbasedate);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.goods-base-detail {
  margin: 15px 10px 20px;
  .base-detail-title {
    margin: 15px 0;
    font-size: 18px;
    font-weight: 700;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .base-info-price {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    .new-price {
      font-size: 28px;
      color: #ff5777;
    }
    .old-price {
      padding: 0 10px;
      font-size: 18px;
      color: #666;
      text-decoration: line-through;
    }
    .discount {
      border-radius: 6px;
      padding: 3px 15px;
      font-size: 16px;
      color: #fff;
      background: #ff5777;
    }
  }
  .base-info-other {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .base-info-service {
   margin: 15px 0;
    ul {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      li {
        img {
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }
        span {
          font-size: 14px;
        }
      }
    }
  }
}
</style>